<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/csx/csxPlaylist.js"></script>
  <!--[if lt IE 9]>
  <script src="js/ie/html5shiv.js"></script>
  <script src="js/ie/respond.min.js"></script>
  <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<style>
  a{
    text-decoration: none;
  }
  .hot_new{
    font-size:16px;
    float: left;
    border: solid 1px grey;
    border-collapse: collapse;
    width: 80px;
    height: 35px;
    text-align:center;
    line-height: 35px;
  }
  .playlist_tag__list{
    float: left;
    width: 20%;
  }
  .playlist_tag__list .playlist_tag__tit{
    margin-left: 80px;
    font-size: 22px;
  }
  .playlist_tag__list .playlist_tag__itembox{
    text-align: left;
    width: 30%;
  }
  .playlist_tag__tags{
    margin-left: 35px;
  }
  .playlist_tag__itembox{
    float: left;
    list-style: none;
    font-size: 18px;
    padding: 6px;
  }
  .popup_tag1 .playlist_tag__itembox{
  }
  .playlist_tag__item:hover{
    color: #0bc30f;
    font-size: 0.9em;
  }
  .tuijian11{
    background-color: #90ee90;
  }
 /* .hot_new:hover{
    background-color: #90ee90;
  }*/
  .js_1024 a{
    color: black;
  }
</style>

<script>

  var div;
  function gengduo1(){
    div=document.getElementById("GD1");
    if(div.style.display=="none")
    {
      div.style.display="inline-block";
      div.style.position="absolute";
      div.style.top="120px";
      div.style.left="71px";
      div.style.background="#fff";
      div.style.width="100%";
      div.style.boxShadow="0px 0px 1px blue";
      $("#GD2").hide();
      $("#GD3").hide();
      $("#GD4").hide();
      $("#GD5").hide();
    }
    else{
      div.style.display="none";
    }
  }
  function gengduo2(){
    div=document.getElementById("GD2");
    if(div.style.display=="none")
    {
      div.style.display="inline-block";
      div.style.position="absolute";
      div.style.top="120px";
      //div.style.left="350px";
      div.style.left="71px";
      div.style.background="#fff";
      div.style.width="100%";
      div.style.boxShadow="0px 0px 1px blue";
      $("#GD1").hide();
      $("#GD3").hide();
      $("#GD4").hide();
      $("#GD5").hide();
    }
    else{
      div.style.display="none";
    }
  }
  function gengduo3(){
    div=document.getElementById("GD3");
    if(div.style.display=="none")
    {
      div.style.display="inline-block";
      div.style.position="absolute";
      div.style.top="120px";
      div.style.left="71px";
      div.style.background="#fff";
      div.style.width="100%";
      div.style.boxShadow="0px 0px 1px blue";
      $("#GD2").hide();
      $("#GD1").hide();
      $("#GD4").hide();
      $("#GD5").hide();
    }
    else{
      div.style.display="none";
    }
  }
  function gengduo4(){
    div=document.getElementById("GD4");
    if(div.style.display=="none")
    {
      div.style.display="inline-block";
      div.style.position="absolute";
      div.style.top="120px";
      div.style.left="71px";
      div.style.background="#fff";
      div.style.width="100%";
      div.style.boxShadow="0px 0px 1px blue";
      $("#GD2").hide();
      $("#GD3").hide();
      $("#GD1").hide();
      $("#GD5").hide();
    }
    else{
      div.style.display="none";
    }
  }
  function gengduo5(){
    div=document.getElementById("GD5");
    if(div.style.display=="none")
    {
      div.style.display="inline-block";
      div.style.position="absolute";
      div.style.top="120px";
      div.style.left="71px";
      div.style.background="#fff";
      div.style.width="100%";
      div.style.boxShadow="0px 0px 1px blue";
      $("#GD2").hide();
      $("#GD3").hide();
      $("#GD4").hide();
      $("#GD1").hide();
    }
    else{
      div.style.display="none";
    }
  }
</script>
<body>
<section class="vbox">
  <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">


    <div class="navbar-header aside bg-primary nav-xs">
      <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
        <i class="icon-list"></i>
      </a>
      <a href="index.jsp" class="navbar-brand text-lt" style="height: 60px">
        <i style="line-height: 60px" class="icon-earphones"></i>
        <img src="images/logo.png" alt="." class="hide">
        <span class="hidden-nav-xs m-l-sm">Musik</span>
      </a>
      <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
        <i class="icon-settings"></i>
      </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
        <i class="fa fa-indent text"></i>
        <i class="fa fa-dedent text-active"></i>
      </a>
    </li>
  </ul>
    <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
      <div class="form-group">
        <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
          <input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
        </div>
      </div>
    </form>
    <div style="float: left;font-size: 24px;font-weight: bolder; margin-left:14%;margin-top: 1%">
      <a href="genres.html" style="display:inline-block;width:75px; margin-left:20px;">歌手</a>
      <a href="#" style="display:inline-block;width:75px; margin-left:30px;">专辑</a>
      <a href="playlistServlet" style="display:inline-block;width:120px; margin-left:30px;">分类歌单</a>
      <a href="#" style="display:inline-block;width:100px; margin-left:30px;">排行榜</a>
      <a href="#" style="display:inline-block;width:75px; margin-left:30px;">用户</a>
      <a href="javascript:void(0);" onclick="show()" style="display:inline-block;width:75px; margin-left:200px;">登录</a>
    </div>
    <div class="navbar-right ">
      <ul class="nav navbar-nav m-n hidden-xs nav-user user">
        <li class="hidden-xs">
          <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
            <i class="icon-bell"></i>
            <span class="badge badge-sm up bg-danger count">2</span>
          </a>
          <section class="dropdown-menu aside-xl animated fadeInUp">
            <section class="panel bg-white">
              <div class="panel-heading b-light bg-light">
                <strong>You have <span class="count">2</span> notifications</strong>
              </div>
              <div class="list-group list-group-alt">
                <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="images/a0.png" alt="..." class="img-circle">
                    </span>
                  <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                </a>
                <a href="#" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                </a>
              </div>
              <div class="panel-footer text-sm">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
              </div>
            </section>
          </section>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="${user.head}" alt="...">
              </span>
            ${user.name} <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <li>
              <span class="arrow top"></span>
              <a href="index.jsp">首页</a>
            </li>
            <li>
              <a href="<%=request.getContextPath()%>/CSXUserServlet?opr=userPageMessage">个人中心</a>
            </li>
          <%--  <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                信息
              </a>
            </li>
            <li>
              <a href="docs.html">帮助</a>
            </li>--%>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal" >退出登录</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
        <section class="vbox">
          <section class="w-f-md scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
              <!-- nav -->
              <nav class="nav-primary hidden-xs">
                <ul class="nav bg clearfix">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    Discover
                  </li>
                  <li>
                    <a href="index.jsp">
                      <i class="icon-disc icon text-success"></i>
                      <span class="font-bold">首页</span>
                    </a>
                  </li>
                  <li>
                    <a href="genres.html">
                      <i class="icon-user icon text-info"></i>
                      <span class="font-bold">歌手</span>
                    </a>
                  </li>
                  <li>
                    <a href="AlbumPageServlet?page=1&opr=showAll">
                      <i class="icon-drawer icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">专辑</span>
                    </a>
                  </li>
                  <li>
                    <a href="events.jsp">
                      <i class="icon-playlist icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">分类歌单</span>
                    </a>
                  </li>
                  <li>
                    <a href="listen.html">
                      <i class="icon-music-tone-alt icon  text-info-dker"></i>
                      <span class="font-bold">听歌</span>
                    </a>
                  </li>
                  <li>
                    <a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
                      <i class="icon-social-youtube icon  text-primary"></i>
                      <span class="font-bold">MV</span>
                    </a>
                  </li>
                  <li class="m-b hidden-nav-xs"></li>
                </ul>
                <ul class="nav" data-ride="collapse">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    Interface
                  </li>

                  <li >
                    <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                      <i class="icon-grid icon">
                      </i>
                      <span>Pages</span>
                    </a>
                    <ul class="nav dk text-sm">
                      <li >
                        <a href="profile.jsp" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Profile</span>
                        </a>
                      </li>
                      <li >
                        <a href="blog.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Blog</span>
                        </a>
                      </li>
                      <li >
                        <a href="gmap.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Google Map</span>
                        </a>
                      </li>
                      <li >
                        <a href="signin.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Signin</span>
                        </a>
                      </li>
                      <li >
                        <a href="signup.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Signup</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav text-sm">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                    Playlist
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-music-tone icon"></i>
                      <span>Hip-Pop</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-playlist icon text-success-lter"></i>
                      <b class="badge bg-success dker pull-right">9</b>
                      <span>Jazz</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <!-- / nav -->
            </div>
          </section>

          <footer class="footer hidden-xs no-padder text-center-nav-xs">
            <div class="bg hidden-xs ">
              <div class="dropdown dropup wrapper-sm clearfix">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="images/a3.png" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
                  <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong> 
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                </a>
                <ul class="dropdown-menu animated fadeInRight aside text-left">
                  <li>
                    <span class="arrow bottom hidden-nav-xs"></span>
                    <a href="#">Settings</a>
                  </li>
                  <li>
                    <a href="profile.jsp">Profile</a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="badge bg-danger pull-right">3</span>
                      Notifications
                    </a>
                  </li>
                  <li>
                    <a href="docs.html">Help</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
                  </li>
                </ul>
              </div>
            </div>            </footer>
        </section>
      </aside>
      <!-- /.aside -->
      <section id="content">
          </div>
          <div id="GD" class="js_1024" style="display: block;">

            <div class="playlist_tag__list playlist_tag__list--lang">
              <h3 class="playlist_tag__tit c_tx_thin">语种</h3>

              <i class="playlist_tag__line"></i>

              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="1">国语</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="2">英语</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="3">韩语</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="4">粤语</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="5">日语</a></li>


                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_more_tag" href="javascript:;" onclick="gengduo1()">更多<i class="playlist_tag__arrow sprite"></i></a></li>

              </ul>
            </div>

            <div id="GD1" class="popup_tag" style="display: none;">
              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="6">小语种</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="7">闽南语</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="8">法语</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="9">拉丁语</a></li>

              </ul>
            </div>


            <div class="playlist_tag__list ">
              <h3 class="playlist_tag__tit c_tx_thin">流派</h3>

              <i class="playlist_tag__line"></i>

              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="10">流行</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="11">轻音乐</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="12">摇滚</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="13">民谣</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="14">R&amp;B</a></li>


                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_more_tag" href="javascript:;" onclick="gengduo2()">更多<i class="playlist_tag__arrow sprite"></i></a></li>

              </ul>
            </div>

            <div id="GD2" class="popup_tag" style="display: none;">
              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="15">嘻哈</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="16">电子</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="17">古典</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="18">乡村</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="19">蓝调</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="20">爵士</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="21">新世纪</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="22">拉丁</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="23">后摇</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="24">中国传统</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="25">世界音乐</a></li>

              </ul>
            </div>


            <div class="playlist_tag__list ">
              <h3 class="playlist_tag__tit c_tx_thin">主题</h3>

              <i class="playlist_tag__line"></i>

              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="26">ACG</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="27">经典</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="28">网络歌曲</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="29">影视</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="30">KTV热歌</a></li>


                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_more_tag" href="javascript:;" onclick="gengduo3()">更多<i class="playlist_tag__arrow sprite"></i></a></li>

              </ul>
            </div>

            <div id="GD3" class="popup_tag" style="display: none;">
              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="31">儿歌</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="32">中国风</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="33">古风</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="34">情歌</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="35">城市</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="36">现场音乐</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="37">背景音乐</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="38">佛教音乐</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="39">UP主</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="40">乐器</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="41">DJ</a></li>

              </ul>
            </div>


            <div class="playlist_tag__list ">
              <h3 class="playlist_tag__tit c_tx_thin">心情</h3>

              <i class="playlist_tag__line"></i>

              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="42">伤感</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="43">安静</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="44">快乐</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="45">治愈</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="46">励志</a></li>


                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_more_tag" href="javascript:;" onclick="gengduo4()">更多<i class="playlist_tag__arrow sprite"></i></a></li>

              </ul>
            </div>

            <div id="GD4" class="popup_tag" style="display: none;">
              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="47">甜蜜</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="48">寂寞</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="49">宣泄</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="50">思念</a></li>

              </ul>
            </div>


            <div class="playlist_tag__list ">
              <h3 class="playlist_tag__tit c_tx_thin">场景</h3>

              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="51">睡前</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="52">夜店</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="53">学习</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="54">运动</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="55">开车</a></li>


                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_more_tag" href="javascript:;" onclick="gengduo5()">更多<i class="playlist_tag__arrow sprite"></i></a></li>

              </ul>
            </div>

            <div id="GD5" class="popup_tag" style="display: none;">
              <ul class="playlist_tag__tags">

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="56">约会</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="57">工作</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="58">旅行</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="59">派对</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="60">婚礼</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="61">咖啡馆</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="62">跳舞</a></li>

                <li class="playlist_tag__itembox"><a class="playlist_tag__item js_tag" href="javascript:;" data-id="63">校园</a></li>

              </ul>
            </div>

          </div></div>
        <div style="clear: both" >
          <ul style="margin-left: 15%;list-style: none;padding-top: 2%">
            <li ><a href="playlistServlet" style="font-size:24px;color: black;float: left;margin-left: -170px">全部歌单</a></li>

          </ul>
        </div>
        <div id="hot_new_item" style="clear: right;margin-left:70%; margin-bottom: 3%;display: block" >
          <ul id="switch" style="margin-left: 45%;list-style: none;">
            <li ><a  class="hot_new tuijian11" href="playlistServlet" id="most_new" >推荐</a></li>
            <li ><a id="hot" class="hot_new" href="javascript:;" hot="1">最热</a></li>
          </ul>
        </div>

        <section class="vbox" >
          <section class="scrollable">
            <c:forEach items="${playlists}" var="playlist" varStatus="playlistIndex">
              <div id="zongDIV${playlistIndex.index}" class="pos-rlt animated fadeInUpBig zongDIV tagPlaylist" tagPlaylistId="${playlist.playlistId}" playlistValue="${playlistIndex.index}">
              <div class="item" style="width: 300px;height: 300px;margin-left:8%;margin-top:1%;float: left;">
                <div class="carousel slide auto" data-interval="3000">
                  <div class="carousel-inner" >
                    <div id="playlistSumNo1-2${playlistIndex.index}" class="item active">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.01</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div id="lableNo1-1${playlistIndex.index}" class="bottom wrapper bg-info gd">
                        <div id="lableNo1-3${playlistIndex.index}" class="m-t m-b"><a style="font-size: 26px" href="javascript:;" class="yichu">${playlist.playlistName}</a></div>
                        <p class="hidden-xs yichu">播放量：${playlist.playlistPlaycount}</p>
                      </div>
                      <a href="#"><img src="${playlist.playlistPoster}" alt="" id="yichu1" class="img-full yichu1" style="width: 300px;height: 300px;"></a>
                    </div>
                    <div id="playlistSumNo2-2${playlistIndex.index}" class="item">
                      <div class="item-overlay opacity animated fadeInDown wrapper bg-info">
                        <p class="text-white">N.02</p>
                        <div class="center text-center m-t-n">
                          <a href="#"><i class="icon-control-play i-2x"></i></a>
                        </div>
                      </div>
                      <div id="lableNo2-1${playlistIndex.index}" class="bottom wrapper bg-info gd">
                        <div id="lableNo2-3${playlistIndex.index}" class="m-t m-b"><a style="font-size: 15px" href="javascript:;" class="yichu">简介：${playlist.playlistProfile}</a></div>
                        <p class="hidden-xs yichu">${playlist.user.name}</p>
                      </div>
                      <a href="#"><img src="${playlist.user.head}" alt="" class="img-full yichu1" style="width: 300px;height: 300px;"></a>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </c:forEach>
            <div align="center" style="clear: both;" >
              <ul class="pagination pagination">
                <li style="line-height: 34px;font-size: 16px">共${totalCount}条记录===${pageIndex}/${totalPage}页</li>
               <%-- <li class="active"><a style="background-color: #fff;color: rgb(66,139,202)" href="<%=request.getContextPath()%>/playlistServlet?pageIndex=1">首页</a></li>--%>
                <%--//<li><a href="#">2</a></li>--%>
                <li><a href="<%=request.getContextPath()%>/playlistServlet?pageIndex=1&lable=${lable}&hot=${hot}">首页</a></li>
                <li><a href="<%=request.getContextPath()%>/playlistServlet?pageIndex=${pageIndex-1}&lable=${lable}&hot=${hot}">上一页</a></li>
                <li><a href="<%=request.getContextPath()%>/playlistServlet?pageIndex=${pageIndex+1}&lable=${lable}&hot=${hot}">下一页</a></li>
                <li><a href="<%=request.getContextPath()%>/playlistServlet?pageIndex=${totalPage}&lable=${lable}&hot=${hot}">最后一页</a></li>
                <li style="font-size: 16px">跳转至
                  <form  style="display: inline" action="<%=request.getContextPath()%>/playlistServlet" method="post">
                    <input id="inputPage" type="text" style="width: 50px">
                      <button type="button" onclick="jump_to(document.forms[0],document.getElementById('inputPage').value)">GO</button>
                  </form>
                </li>
              </ul>
            </div>
              <%--<div align="center" style="clear: both;" >
                  <ul class="pagination pagination">
                      <li id="totalPage" value=${totalPage} pageIndex=${pageIndex} totalCount=${totalCount} style="line-height: 34px;font-size: 16px">共${totalCount}条记录===${pageIndex}/${totalPage}页</li>
                      &lt;%&ndash; <li class="active"><a style="background-color: #fff;color: rgb(66,139,202)" href="<%=request.getContextPath()%>/playlistServlet?pageIndex=1">首页</a></li>&ndash;%&gt;
                      &lt;%&ndash;//<li><a href="#">2</a></li>&ndash;%&gt;
                      <li class="totalPage" pageIndex="1"><a id="homePage" href="#" >首页</a></li>
                      <li class="totalPage" pageIndex=${pageIndex-1}><a id="upPage" href="#" >上一页</a></li>
                      <li class="totalPage" pageIndex=${pageIndex+1}><a id="downPage" href="#" >下一页</a></li>
                      <li class="totalPage" pageIndex=${totalPage}><a id="endPage" href="#" >最后一页</a></li>
                      <li style="font-size: 16px">跳转至
                          <form  style="display: inline" action="<%=request.getContextPath()%>/playlistServlet" method="post">
                              <input id="inputPage" type="text" style="width: 50px">
                              <button type="button" onclick="jump_to(document.forms[0],document.getElementById('inputPage').value)">GO</button>
                          </form>
                      </li>
                  </ul>
              </div>--%>

              <div style="background-color: #a5a5a5;padding-bottom: 15%;">
                <div class="footer_download" align="center">
                  <h4 class="footer_tit">友情链接</h4>
                  <a href="https://y.qq.com/" >QQ音乐：https://y.qq.com/</a>
                  <a href="http://www.kugou.com/" >酷狗音乐：http://www.kugou.com/</a>
                  <a href="//y.qq.com/download/" >网易音乐：https://music.163.com/</a>
                  <a href="https://www.xiami.com/" >虾米音乐：https://www.xiami.com/</a>
                  <a href="" >千千静听: http://music.taihe.com/</a>
                  </ul>
                </div>
                <div align="center" style="padding-top:1%">
                  <a href="">关于魔音|</a>
                  <a href="">About MonsterMusic|</a>
                  <a href="">服务条款|</a>
                  <a href="">用户服务协议|</a>
                  <a href="">隐私政策|</a>
                  <a href="">权利声明|</a>
                  <a href="">广告服务|</a>
                  <a href="">客服中心|</a>
                  <a href="">魔音招聘|</a>
                  <a href="">网站导航</a>
                </div>
                <div align="center">
                  Copyright @ 2018 - 2019 MonsterMusic All Rights Reserved.
                </div>
                <div align="center">
                  <a >魔音公司  </a>
                  <a href="">  版权所有</a>
                  <a href="">  魔音网络文化经营许可证</a>
                </div>
              </div>
            </div>
          </section>
        </section>
        </div>
        </div>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
      </section>
    </section>
  </section>
</section>

<script>
  //提交表单验证
  function page_nav(frm,num) {
      window.location.href="playlistServlet?lable=${lable}&pageIndex="+num;
  }
  
  //验证跳转页面的正确性
  function jump_to(frm,num) {
    //正则表达式。只能是数字
    var regexp = /^[1-9]\d*$/;
    var totalPage = ${totalPage};

    if(!regexp.test(num)){
      alert("请输入正确的数字！！！");
      return false;
    }else if(num-totalPage>0){
      alert("总共有"+totalPage+"页，请输入正确的页码！！！");
      return false;
    }else{
    /*  frm.document.getElementById("inputPage").val;
      frm.submit();*/
      page_nav(frm,num);
    }
  }

  //点击获取歌单ID  跳转歌单详情页
  $(document).ready(function () {
    $(".tagPlaylist").click(function () {
      var tagPlaylistId=$(this).attr("tagPlaylistId")
      alert(tagPlaylistId);
      window.location.href="music/playlist?id="+tagPlaylistId;
    })
  })
</script>

<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/masonry/tiles.min.js"></script>
<script src="js/masonry/demo.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/jPlayer/demo.js"></script>


</body>
</html>